<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="https://s2.loli.net/2022/10/22/kwH5eq2NTmjL7Fr.png" type="image/x-icon">
    <title>分组</title>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <link rel="stylesheet" href="/static/css/group.css">
    <script src="//unpkg.com/vue@3"></script>
    <script src="//unpkg.com/element-plus"></script>
</head>

<body>
    <div id="view">
        <div class="btn" v-if="!isGroup">
            <el-button class="group_btn" size="large" type="primary" @click="confirm">开始分组</el-button>
        </div>

<!--        <el-dialog title="输入分组信息" v-model="dialogVisible" width="30%" :before-close="handleClose">-->
<!--            <el-form :model="form">-->
<!--                <el-form-item label="请输入参与人员数量：" :label-width="formLabelWidth">-->
<!--                    <el-input v-model="people" autocomplete="off" />-->
<!--                </el-form-item>-->
<!--                <el-form-item label="每组人数：" :label-width="formLabelWidth">-->
<!--                    <el-input v-model="number" autocomplete="off" />-->
<!--                </el-form-item>-->
<!--            </el-form>-->
<!--            <template #footer>-->
<!--                <span class="dialog-footer">-->
<!--                    <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--                    <el-button type="primary" @click="confirm">确 定</el-button>-->
<!--                </span>-->
<!--            </template>-->
<!--        </el-dialog>-->

        <div class="result" v-show="isGroup">
            <div class="title">分组情况</div>
            <el-row :gutter="30">
                <el-col :span="span" v-for="item,index in groups" :offset="index == 0 ? offset : 0">
                    <div class="group">
                        <el-tag class="index" :type="item.type"  style="margin: 10px 0;font-weight: 900; font-size: 25px">第{{index + 1}}组</el-tag>
                    </div>
                    <div class="grid-content ep-bg-purple" v-for="xh in item.numbers">
                        <el-tag :type="xh.type">{{xh.number}}</el-tag>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
    <script src="/static/js/group.js"></script>
</body>

</html>